<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>付款</title>
    <!-- 引入样式-->
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.14.1/theme-chalk/index.min.css">
    <!-- 引入组件库 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.14.1/index.min.js"></script>
    <link rel="stylesheet" href="layui/css/layui.css"/>
    <link rel="stylesheet" href="css/shopping.css"/>
    <link rel="stylesheet" href="css/buy.css"/>
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="layer/layer.js"></script>
    <script type="text/javascript" src="layui/layui.js"></script>

    <!--该页面需要登录的权限认证-->
    <script src="js/auth.js"></script>
    <style>
        /*购买商品信息*/
        .my-pay-goodsMess {
            height: 100px;
        }

        .my-pay-goodsMess p {
            height: 50px;
            line-height: 50px;
            text-indent: 50px;
        }

        /*付款方式图标*/

        .paytype-image {
            display: block;
            float: left;
            width: 180px;
            height: 55px;
            margin: 20px 20px;
            cursor: pointer;
            border: 2px solid #fff;
            opacity: 0.6;
        }

        .payimg-sel {
            border: 2px solid #FF4400;
            opacity: 1;
        }

        .paytype-image:hover {
            opacity: 1;
        }
    </style>
    <script>

        /*
        $(function () {
            //选择付款方式
            $(".paytype-image").click(function () {
                $(this).addClass("payimg-sel");
                $(this).siblings().removeClass("payimg-sel");
            });

            //点击付款按钮
            $("#buyBtn").click(function () {
                layer.confirm('是否已完成付款？', {
                    btn: ['已付款', '遇到问题'] //按钮
                }, function () {
                    //已完成付款
                    location.href = "payResult.html";
                }, function () {
                    //未完成付款
                    layer.msg('是否重新支付？', {
                        time: 20000, //20s后自动关闭
                        btn: ['支付', '算了']
                    });
                });
            });

        });*/


    </script>

</head>

<body>

<!-- 引入头部 -->
<div>
    <iframe src="header.html" scrolling="no" style="height:140px;width: 100%;border: 0px;"></iframe>
</div>
<!--引入头部end-->

<hr style="height: 10px; background-color: #FF4400;"/>
<div id="app">
    <!--商品信息部分-->
    <div class="layui-container">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
            <legend>商品信息</legend>
        </fieldset>
        <div>
            <table class="layui-table my-shopping-table" lay-skin="line">
                <colgroup>
                    <col width="160">
                    <col width="">
                    <col width="100">
                    <col width="100">
                    <col width="100">

                </colgroup>
                <thead>
                <tr>
                    <th style="font-weight: bold;">

                    </th>
                    <th style="font-weight: bold;">
                        商品信息
                    </th>
                    <th style="text-align: center;font-weight: bold;">
                        单价
                    </th>
                    <th style="text-align: center;font-weight: bold;">
                        数量
                    </th>
                    <th style="text-align: center;font-weight: bold;">
                        合计
                    </th>

                </tr>
                </thead>
                <tbody>
                <tr v-for="(good,index) in cart.goodsList">
                    <td>
                        <a href="">
                            <img :src="good.pic" width="80px"/>
                        </a>
                    </td>
                    <td>
                        <a href="">
                            {{good.name}}
                        </a>
                    </td>
                    <td align="center">
                        <span>￥{{good.price}}</span>
                    </td>
                    <td align="center">
                        ×{{good.buyNum}}件
                    </td>
                    <td align="center">
                        <span>￥{{good.price * good.buyNum}}</span>
                    </td>
                </tr>

                </tbody>
            </table>
        </div>
        <div class="layui-row">
            <div class="layui-col-md12 my-pay-goodsMess">
                <p>
                    收件人：{{cart.address.realname}}&nbsp;&nbsp; {{cart.address.mobile}}&nbsp;&nbsp;
                    {{cart.address.province}}&nbsp;&nbsp;
                    {{cart.address.city}}&nbsp;&nbsp;{{cart.address.zone}} {{cart.address.street}}
                </p>
            </div>
        </div>

    </div>
    <!--商品信息end-->

    <!--付款方式-->
    <div class="layui-container" style="top:-30px;">
        <div class="layui-row">
            <div class="layui-col-md12">
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
                    <legend>付款方式</legend>
                </fieldset>
                <img @click="changePayType(index)" v-for="(pay,index) in payTypeList" class="paytype-image" :class="{'payimg-sel': paySelectedIndex === index}" :src="pay.logo" :alt="pay.name"/>

            </div>
        </div>
    </div>
    <!--付款方式end-->

    <!--支付部分-->
    <div class="layui-container" style="top: -20px;">
        <div class="layui-row  my-shopping-buy">
            <div class="layui-col-md12">
                <div class="my-buyCheck">
                </div>
                <div class="my-buyBtn">
                    总价：
                    <font style="font-size: 20px;font-weight: bold;color:#FF4400;">￥{{cart.totalPrice}}</font>
                    <button id="buyBtn" @click="doPay">支付</button>
                </div>
            </div>

        </div>
    </div>
</div>

<!--支付部分end-->
<!--引入底部-->
<div class="my-footer">
    <iframe src="footer.html" scrolling="no" style="border: 0px;width: 100%;height: 291px;"></iframe>
</div>

<script src="js/include/libs.js"></script>

<script>

    let vm = new Vue({
        el: '#app',
        data: {
            type: getQueryVariable("type"),
            currentLoginSuccessUser: {},
            cart: {},
            orderMain: {},
            paySelectedIndex: 0,
            payTypeList:[
                {
                    "name": '支付宝',
                    "logo": 'img/pay/pay_zfb.png',
                },
                {
                    "name": '微信',
                    "logo": 'img/pay/pay_wx.png',
                },
                {
                    "name": '建设银行',
                    "logo": 'img/pay/pay_jsyh.png',
                },
                {
                    "name": '工商银行',
                    "logo": 'img/pay/pay_gsyh.png',
                },
                {
                    "name": '农业银行',
                    "logo": 'img/pay/pay_zfb.png',
                },
                {
                    "name": '交通银行',
                    "logo": 'img/pay/pay_jtyh.png',
                },
                {
                    "name": '中国银行',
                    "logo": 'img/pay/pay_zgyh.png',
                },
                {
                    "name": '招商银行',
                    "logo": 'img/pay/pay_zsyh.png',
                },
                {
                    "name": '中信银行',
                    "logo": 'img/pay/pay_zxyh.png',
                },
                {
                    "name": '光大银行',
                    "logo": 'img/pay/pay_gdyh.png',
                }
            ]
        },
        mounted() {
            this.currentLoginSuccessUser = JSON.parse(localStorage.getItem("currentLoginSuccessUserInfo"));
            if(this.type === 'cart'){
                this.cart = JSON.parse(localStorage.getItem("cart.xiaomimall_" + this.currentLoginSuccessUser.uid));
            }else{
                this.cart = JSON.parse(localStorage.getItem("buynow.xiaomimall_" + this.currentLoginSuccessUser.uid));
            }
            console.log("-------支付页面当前用户的购物车信息如下--------");
            console.log(this.cart);
        },
        methods: {
            doPay() {
                //首先判断用户必须选择微信支付，其它支付方式暂时不支持。
                if(this.paySelectedIndex !== 1){
                    this.$message({
                        message: '抱歉，本系统目前仅支持微信支付！',
                        type: 'error'
                    })
                    return;
                }

                this.cart.users = this.currentLoginSuccessUser;
                createOrder(this.cart).then(resp => {
                    if (resp.data.code === 200) {
                        //console.log('生成订单成功！');
                        this.orderMain = resp.data.data;
                        this.$message({
                            message: resp.data.msg,
                            type: 'success'
                        });

                        //起一个定时器、调用微信支付接口，弹窗一个模态窗口
                        console.log('----------订单生成成功，服务器返回的订单对象如下----------');
                        console.log(this.orderMain);
                        this.orderMain.flag =1;

                        //清空你localStorage中保存的购物车对象了。
                        if(this.type === 'cart'){
                            localStorage.removeItem("cart.xiaomimall_"+this.currentLoginSuccessUser.uid);
                        }else{
                            localStorage.removeItem("buynow.xiaomimall_"+this.currentLoginSuccessUser.uid);
                        }

                        //调用公网的支付接口
                        /**/
                        weixinPay(this.orderMain).then(resp => {
                            if (resp.data.code === 200) {
                                let rqCodeUrl = resp.data.data;
                                //打开新新窗口扫描支付
                                console.log("-------微信支付二维码地址-------")
                                console.log(rqCodeUrl);
                                window.open(rqCodeUrl);
                                //window.location.href=rqCodeUrl;
                            }
                        })


                        setTimeout(() => {
                            this.$confirm('订单是否支付成功?', '提示', {
                                confirmButtonText: '已支付',
                                cancelButtonText: '未支付',
                                type: 'info'
                            }).then(() => {
                                this.$message({
                                    type: 'success',
                                    message: '恭喜您订单支付成功!'
                                });

                                setTimeout(()=>{
                                    window.location.href='payResult.html?oid='+this.orderMain.oid;
                                })
                            }).catch(() => {
                                this.$message({
                                    type: 'info',
                                    message: '很遗憾订单支付失败！'
                                });

                                setTimeout(()=>{
                                    window.location.href='payResult.html?oid='+this.orderMain.oid;
                                })
                            });

                        }, 1000)
                    }
                })
            },
            changePayType(index){
                this.paySelectedIndex = index;
            }
        }
    })
</script>

<!--引入底部end-->
</body>

</html>